<template>
	<view class="container">
		<div class="header">
			<text
				style="color: #fff;font-size: 30upx;padding-top: 30upx;display: inline-block;padding-left: 30upx;">消息</text>

		</div>
		<view class="content">
<!-- 			<view class="view" v-if="chatList.length>0">
				<view class="list" v-for="(item,index) in chatList" @touchstart.prevent="touchstart(index)"
					@touchend.prevent="touchend">
					<image src="../../static/xitong.png" mode="" style="width: 88upx;height: 88upx;border-radius: 50%;">
					</image>
					<text
						style="width: 28upx;height: 28upx;display: inline-block;background-color: #FF2B2B;border-radius: 50%;position: relative;top: -6px;left: -10px;"
						v-if="item.is_read == 0"></text>
					<view style="display: flex;flex-direction: column;padding-left: 20upx;"
						@click="navigateToArticle(item.id)">
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<text style="color: #999999;font-size: 30 upx;">{{item.title}}</text>
							<text style="color: #999999;font-size: 30 upx;">{{item.create_time}}</text>
						</view>
						<view style="color: #fff;font-size: 30upx;padding-top: 16upx;width: 540upx;">{{item.content}}
						</view>
					</view>
				</view>

			</view> -->
			<view class="view" v-if="x_mess.length>0">
				<view class="list" style="position: relative;"
					@tap.prevent="navigateToArticled(private_mess.id)" @longpress.prevent="touchstart(index)">
					<image src="../../static/xitong.png" mode="" style="width: 88upx;height: 88upx;border-radius: 50%;">
					</image>
					<text
						style="width: 28upx;height: 28upx;display: inline-block;background-color: #FF2B2B;border-radius: 50%;position: absolute;top: 20px;left: 50px;"
						v-if="readnum !== 0"></text>
					<view style="display: flex;flex-direction: column;padding-left: 20upx;">
						<view style="display: flex;align-items: center;justify-content: space-between;width: 560upx;">
							<text style="color: #999999;font-size: 30 upx;">{{private_mess.title}}</text>
							<text style="color: #999999;font-size: 30 upx;">{{private_mess.create_time}}</text>
						</view>
						<view style="color: #fff;font-size: 30upx;padding-top: 16upx;width: 540upx;">{{private_mess.content}}
						</view>
					</view>

				</view>

			</view>
			<view class="view" style="display: flex;flex-direction: column;">
				<view class="list" v-for="(item,index) in sixin" style="position: relative;" @tap.prevent="tosixin(item.other_id,item.from_username,item.fromid,item)" @longpress.prevent="touchstart(index)">
					<image :src="item.from_headimgurl" mode="" style="width: 88upx;height: 88upx;border-radius: 50%;">
					</image>
					<text
						style="width: 28upx;height: 28upx;display: inline-block;background-color: #FF2B2B;border-radius: 50%;position:absolute;top: 20px;left: 44px;"
						v-if="item.is_read == 0"></text>
					<view style="display: flex;flex-direction: column;padding-left: 10upx;">
						<view style="display: flex;align-items: center;justify-content: space-between;width: 560upx;">
							<text style="color: #999999;font-size: 30 upx;">{{item.from_username}}</text>
							<text style="color: #999999;font-size: 30 upx;">{{item.times}}</text>
						</view>
						<view style="color: #fff;font-size: 30upx;padding-top: 16upx;width: 600upx;">
							<text>{{item.message}}</text>
						</view>
					</view>
				</view>

			</view>
			<view style="width: 100%;height: 348upx;display: flex;justify-content: center;align-items: center;"
				v-if="x_mess.length==0&&sixin.length==0">
				<image src="@/static/nomess.png" mode="" style="width: 156px;height: 200upx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	let isOpenReachBottom = false
	export default {

		data() {
			return {
				chatList: [],
				readnum:"",
				coupons_mess: [],
				focus_mess: [],
				private_mess: {},
				page: 1,
				Loop: null,
				sixin: [],
				x_mess:[]
			}
		},
		onShow() {
			this.$http.getreadprofile().then(res => {
				console.log(res, "微信登录没有走这里吗")
				if (res.status == 200) {
					if(res.data.status == 400){
						uni.navigateTo({
							url: '/pagesB/login/login'
						})
					}
				} else {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}
			})
			this.page = 1
			this.$http.getsixin({
				page: this.page,
				page_size: 10,
			}).then(res => {
				console.log(res.data, "私信列表")
				this.sixin = res.data
			})
			this.getList()

		},
		onLoad() {

			this.getList()
			this.$http.getreadprofile().then(res => {
				console.log(res, "微信登录没有走这里吗")
				if (res.status == 200) {
					if(res.data.status == 400){
						uni.navigateTo({
							url: '/pagesB/login/login'
						})
					}
				} else {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}
			})
			this.$http.getsixin({
				page: this.page,
				page_size: 10,
			}).then(res => {
				console.log(res.data, "私信列表")
				this.sixin = res.data
			})
		},

		onPullDownRefresh() {

			isOpenReachBottom = true
			this.page = 1
			this.getList()
			this.$http.getsixin({
				page: this.page,
				page_size: 10,
			}).then(res => {
				console.log(res.data, "私信列表")
				this.sixin = res.data
			})
		},

		onReachBottom() {
			uni.showLoading({
				title: "加载中"
			})
			if (this.sixin.length == (10 * this.page)) {
				let timer = setTimeout(() => {
					// this.getwzList()
					this.page++
					this.$http.getxx({
						page: this.page,
						page_size: 10,
					}).then(res => {
						console.log(JSON.stringify(res.data.read_num) + '', "消息列表666")
						this.chatList = res.data.system_mess.data
						// this.coupons_mess = res.data.coupons_mess.data
						// this.focus_mess = res.data.focus_mess.data
						this.private_mess = this.private_mess.concat(res.data.system_mess.data)
					})
					uni.hideLoading()
					uni.showToast({
						title: "加载完成",
						icon: "none"
					})
					clearTimeout(timer)
				}, 1500)
			} else {
				let timer = setTimeout(() => {
					uni.showToast({
						title: "没有更多",
						icon: "none"
					})
					clearTimeout(timer)
				}, 1500)
			}

		},
		methods: {
			shanchu(id){
				this.$http.delsixin({
					room_id: id
				}).then(res => {
					console.log(res, "删除信息")
					if (res.status == 200) {
						uni.showToast({
							title: '删除成功'
						})
						// this.page = 1
						this.getsixin()
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}
				
				
				})
			},
			delmess(id) {
				this.$http.delxin({
					mess_id: id
				}).then(res => {
					console.log(res, "删除信息")
					if (res.status == 200) {
						uni.showToast({
							title: '删除成功'
						})
						this.getList()
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}


				})
			},
			touchstart(index) {

				let that = this;

				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器

				this.Loop = setTimeout(function() {

					uni.showModal({

						title: '删除',

						content: '请问要删除本条消息吗？',

						success: async function(res) {

							if (res.confirm) {


								console.log('用户点击确定')
								// that.delmess(that.private_mess[index].id)
								that.shanchu(that.sixin[index].chat_room_id)
							} else if (res.cancel) {

								console.log('用户点击取消')

							}

						}

					});

				}.bind(this), 1000);

			},
			getsixin(){
				this.$http.getsixin({
					page: this.page,
					page_size: 10,
				}).then(res => {
					console.log(res.data, "私信列表")
					this.sixin = res.data
				})
			},

			touchend() {

				clearInterval(this.Loop);

			},
			tosixin(id, name,formid,item) {
				console.log(item)
				uni.navigateTo({

					url: `/pages/businessSon/chat?toId=${id}&name=${name}&formid=${formid}&to_uid=${item.to_uid}&userId=${item.to_uid}`
				})
			},
			getList() {
				this.$loading()
				// this.$http.getnotificationList({
				// 	page: this.page,
				// 	size: 10,
				// 	type: 0
				// }).then(res => {
				// 	const data = res.data
				// 	this.chatList = res.data.data
				// 	console.log(res, "消息数据")
				// })
				this.$http.getxx({
					page: this.page,
					page_size: 10,
				}).then(res => {
					// console.log(res.data.private_mess.data[0], "消息列表666")
					this.chatList = res.data.system_mess.data[0]
					// this.coupons_mess = res.data.coupons_mess.data
					// this.focus_mess = res.data.focus_mess.data
					this.private_mess = res.data.system_mess.data[0]
					this.x_mess =  res.data.system_mess.data
					this.readnum = res.data.read_num
					if (res.data.read_num == 0) {
						var num = ''
						uni.removeTabBarBadge({
							index: 3
						})
					} else {
						var num = JSON.parse(res.data.read_num)
						uni.setTabBarBadge({
							index: 3,
							text: num + ''
						})
					}


				})
			},
			navigateToArticled(id) {
				// console.log(1111)
				uni.navigateTo({
					url:'./catsd'
				})
			},
			navigateToArticle(id) {
				// console.log(1111)
				uni.navigateTo({
					url: '/pages/tabBar/messDetail?id=' + '' + id,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.weidu {
		position: absolute;
		width: 88upx;
		height: 88upx;
		background-color: red;
	}

	.container {
		background-color: #242730;
		width: 100%;
		height: 100%;

		.header {
			width: 100%;
			height: 100upx;
			background-color: #000000;
		}

		.content {
			display: flex;
			flex-direction: column;
			background: #242730;
			padding-bottom: 60upx;

			.list {
				display: flex;
				padding: 39upx 30upx;
				width: 100%;
				padding-bottom: 60upx;
				// height: 150upx;
				border-bottom: 2upx solid #333;
			}
		}
	}
</style>
